﻿


@model WebApp.Models.Company


 @*@Html.HiddenFor(model => model.Id)*@



    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">

                <div class="form-group">
            @Html.LabelFor(model => model.Name,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Name,"" , new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Province,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.Province, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Province,"" , new { @class = "text-danger" })
            </div>
        </div>
    
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">

                <div class="form-group">
            @Html.LabelFor(model => model.Address,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Address,"" , new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.RegisterDate,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.RegisterDate, "Date" ,new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.RegisterDate,"" , new { @class = "text-danger" })
            </div>
        </div>
    
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">

                <div class="form-group">
            @Html.LabelFor(model => model.City,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.City,"" , new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Employees,   htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                                @Html.EditorFor(model => model.Employees, new { htmlAttributes = new { @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Employees,"" , new { @class = "text-danger" })
            </div>
        </div>
    
        </div>
    </div>


    <!-- details tabs -->
    <div class="tabs">
	<div role="tabpanel">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
								<li role="presentation" class="active"><a href="#tab-Departments" aria-controls="tab-Departments" role="tab" data-toggle="tab">Departments</a></li>		 
								        
			 
								<li role="presentation"  ><a href="#tab-Employee" aria-controls="tab-Employee" role="tab" data-toggle="tab">Employee</a></li>		 		 
								        
			 
   
		 </ul>
		 <!-- Tab panes -->
         <div class="tab-content">
		  
		  <div role="tabpanel" class="tab-pane active" id="tab-Departments">
                <div id="toolbar-Departments" class="btn-group">
                    <button type="button" id="adddepartmentsbutton" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>
                    </button>

                    <button type="button" id="removedepartmentsbutton" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash"></i>
                    </button>
                </div>
                <div class="table-responsive">
                <table id="departments-table"  class="table table-striped" data-search="true"
                       data-flat="false"
                       data-toolbar="#toolbar-Departments"
                       data-pagination="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true">
                    <thead>
                        <tr>
                            <th data-formatter="departmentsrowindexFormatter">#No</th>
				
                            			
            <th data-field="CompanyName" data-visible="false" data-align="right"  > Company
            </th>
		        		
                                        <th data-field="Id"   data-visible="false" data-align="right" > Id
            </th>
                		
                                    <th data-field="Name" data-align="left"  > Name
        </th>
                		
                                    <th data-field="Manager" data-align="left"  > Manager
        </th>
                		
                                        <th data-field="CompanyId"   data-visible="false" data-align="right" > CompanyId
            </th>
                                            <th data-field="action" data-formatter="departmentsactionFormatter" data-events="actionEvents">Action</th>
                        </tr>
                    </thead>
                </table>
                </div>
            </div>

		  
		  <div role="tabpanel" class="tab-pane " id="tab-Employee">
                <div id="toolbar-Employee" class="btn-group">
                    <button type="button" id="addemployeebutton" class="btn btn-default">
                        <i class="glyphicon glyphicon-plus"></i>
                    </button>

                    <button type="button" id="removeemployeebutton" class="btn btn-default">
                        <i class="glyphicon glyphicon-trash"></i>
                    </button>
                </div>
                <div class="table-responsive">
                <table id="employee-table"  class="table table-striped" data-search="true"
                       data-flat="false"
                       data-toolbar="#toolbar-Employee"
                       data-pagination="true"
                       data-show-refresh="true"
                       data-show-toggle="true"
                       data-show-columns="true">
                    <thead>
                        <tr>
                            <th data-formatter="employeerowindexFormatter">#No</th>
				
                            			
            <th data-field="CompanyName" data-visible="false" data-align="right"  > Company
            </th>
		        		
                                        <th data-field="Id"   data-visible="false" data-align="right" > Id
            </th>
                		
                                    <th data-field="Name" data-align="left"  > Name
        </th>
                		
                                    <th data-field="Sex" data-align="left"  > Sex
        </th>
                		
                                    <th data-field="Age" data-align="right"  > Age
        </th>
                		
                                    <th data-field="Brithday" data-align="right"  > Brithday
        </th>
                		
                                        <th data-field="CompanyId"   data-visible="false" data-align="right" > CompanyId
            </th>
                                            <th data-field="action" data-formatter="employeeactionFormatter" data-events="actionEvents">Action</th>
                        </tr>
                    </thead>
                </table>
                </div>
            </div>

		  
	</div>
</div>
</div>
<!--end details tabs -->
<!-- Modal  Department-->
<div class="modal fade" id="departmentformModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Department</h4>
            </div>
            <div class="modal-body" id="departmentformModal-body">
                @*@Html.Partial("_OrderDetailForm")*@
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="departmentconfirmbutton" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal  Department-->
<!-- Modal  Employee-->
<div class="modal fade" id="employeeformModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Employee</h4>
            </div>
            <div class="modal-body" id="employeeformModal-body">
                @*@Html.Partial("_OrderDetailForm")*@
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" id="employeeconfirmbutton" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
<!-- End Modal  Employee-->



<script type="text/javascript">
	
	var currentrowindex = -1;
	
	 function deleteDepartment(id) {
        var url = '@Url.Action("DeleteDepartment")';
        bootbox.dialog({
            message: "Are you sure delete " + id,
            title: "Delete Department ",
            buttons: {
                Cancel: {
                    label: "Cancel",
                    className: "btn-default",
                    callback: function () {

                    }
                },
                OK: {
                    label: "OK",
                    className: "btn-success",
                    callback: function () {
                        $.post(url, { id: id }, function (data) {
                            $departmentstable.bootstrapTable('remove', { field: 'Id', values: [id] });
                            //console.log('remove' + row.Id);
                        });
                    }
                }
            }
        });
    }

	function departmentsrowindexFormatter(value, row, index) {
        return index + 1;
    }
    function departmentsactionFormatter(value, row, index) {
        return [
            '<a class="edit" id="departmentsedit" href="javascript:void(0)" title="Add">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>  ',
            ' <a class="remove" id="departmentsremove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
	 
	 function deleteEmployee(id) {
        var url = '@Url.Action("DeleteEmployee")';
        bootbox.dialog({
            message: "Are you sure delete " + id,
            title: "Delete Employee ",
            buttons: {
                Cancel: {
                    label: "Cancel",
                    className: "btn-default",
                    callback: function () {

                    }

                },
                OK: {
                    label: "OK",
                    className: "btn-success",
                    callback: function () {
                        $.post(url, { id: id }, function (data) {
                            $employeetable.bootstrapTable('remove', { field: 'Id', values: [id] });
                            //console.log('remove' + row.Id);
                        });
                    }
                }
            }
        });
    }

	function employeerowindexFormatter(value, row, index) {
        return index + 1;
    }
    function employeeactionFormatter(value, row, index) {
        return [
            '<a class="edit" id="employeeedit" href="javascript:void(0)" title="Add">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>  ',
            ' <a class="remove" id="employeeremove" href="javascript:void(0)" title="Remove">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }
	  
	 
	 window.actionEvents = {
	         'click #departmentsedit': function (e, value, row, index) {
            currentrowindex = index;
            var url = "/Companies/EditDepartment"
            $.get(url + '/' + row.Id, function (data) {
                $('#departmentformModal-body').html(data);
                if (row.Id > 0) {
									//var id = $('#Id','#departmentformModal-body');
					//id.val(row.Id);
									//var name = $('#Name','#departmentformModal-body');
					//name.val(row.Name);
									//var manager = $('#Manager','#departmentformModal-body');
					//manager.val(row.Manager);
									//var companyid = $('#CompanyId','#departmentformModal-body');
					//companyid.val(row.CompanyId);
				                } else {
									var id = $('#Id','#departmentformModal-body');
					id.val(row.Id);
									var name = $('#Name','#departmentformModal-body');
					name.val(row.Name);
									var manager = $('#Manager','#departmentformModal-body');
					manager.val(row.Manager);
									var companyid = $('#CompanyId','#departmentformModal-body');
					companyid.val(row.CompanyId);
				                    
                }
                $('#departmentformModal').modal('toggle');
            });
        } ,
        'click #departmentsremove': function (e, value, row, index) {
            if (row.Id > 0) {
                deleteDepartment(row.Id);
            } else {
                $departmentstable.bootstrapTable('remove', {
                    field: '$index',
                    values: [index]
                });
            }
        }  , 	        'click #employeeedit': function (e, value, row, index) {
            currentrowindex = index;
            var url = "/Companies/EditEmployee"
            $.get(url + '/' + row.Id, function (data) {
                $('#employeeformModal-body').html(data);
                if (row.Id > 0) {
									//var id = $('#Id','#employeeformModal-body');
					//id.val(row.Id);
									//var name = $('#Name','#employeeformModal-body');
					//name.val(row.Name);
									//var sex = $('#Sex','#employeeformModal-body');
					//sex.val(row.Sex);
									//var age = $('#Age','#employeeformModal-body');
					//age.val(row.Age);
									//var brithday = $('#Brithday','#employeeformModal-body');
					//brithday.val(row.Brithday);
									//var companyid = $('#CompanyId','#employeeformModal-body');
					//companyid.val(row.CompanyId);
				                } else {
									var id = $('#Id','#employeeformModal-body');
					id.val(row.Id);
									var name = $('#Name','#employeeformModal-body');
					name.val(row.Name);
									var sex = $('#Sex','#employeeformModal-body');
					sex.val(row.Sex);
									var age = $('#Age','#employeeformModal-body');
					age.val(row.Age);
									var brithday = $('#Brithday','#employeeformModal-body');
					brithday.val(row.Brithday);
									var companyid = $('#CompanyId','#employeeformModal-body');
					companyid.val(row.CompanyId);
				                    
                }
                $('#employeeformModal').modal('toggle');
            });
        } ,
        'click #employeeremove': function (e, value, row, index) {
            if (row.Id > 0) {
                deleteEmployee(row.Id);
            } else {
                $employeetable.bootstrapTable('remove', {
                    field: '$index',
                    values: [index]
                });
            }
        } 	    };

	
	$(function () {
				$departmentstable = $('#departments-table').bootstrapTable({
            data: []
        });
        if (ObjectState == "Modified") {
             companyid =@Model.Id;
            //companyid = $('#Id').val();
            var url = '/Companies/GetDepartmentsByCompanyId/' + companyid;
            $.get(url, function (data) {
                //console.log(data);
                $departmentstable.bootstrapTable('load', data)
            })

        }

        $('#adddepartmentsbutton').on('click', function (e) {
            if ($("form").valid()) {
                currentrowindex = -1;
                var url = "/Companies/CreateDepartment"
                $.get(url, function (data) {
                    //console.log(data);
                    var index = -1;
                    $('#departmentformModal-body').html(data);
                    $('#Id', '#departmentformModal-body' ).val(0);
					$('#CompanyId' , '#departmentformModal-body').val(companyid );
                    $('#departmentformModal').modal('toggle');
                });
            }
            e.preventDefault();
            //Return false regardless of validation to stop form submitting
            //prior to ajax doing its thing
            return false;
        })

		$('#departmentconfirmbutton').on('click', function (e) {
            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");
            if (!$('form').valid()) {
                e.preventDefault();
                return false;
            }
								var companyname = $('#CompanyId :selected' , '#departmentformModal-body').text();
							 					var id = $('#Id' , '#departmentformModal-body').val();
				 							 					var name = $('#Name' , '#departmentformModal-body').val();
				 							 					var manager = $('#Manager' , '#departmentformModal-body').val();
				 							 					var companyid = $('#CompanyId :selected' , '#departmentformModal-body').val();
					
				 			            
            var department = {
               					CompanyName :companyname ,
							 					Id : id ,
				 							 					Name : name ,
				 							 					Manager : manager ,
				 							 					 CompanyId :companyid ,
					
				 								ObjectState:'Added'
            }
            if (currentrowindex == '-1') {
                $departmentstable.bootstrapTable('append', department);
            } else {
                $departmentstable.bootstrapTable('updateRow', { index: currentrowindex, row: department });
            }

            $('#departmentformModal').modal('toggle');
        });

				$employeetable = $('#employee-table').bootstrapTable({
            data: []
        });
        if (ObjectState == "Modified") {
             companyid =@Model.Id;
            //companyid = $('#Id').val();
            var url = '/Companies/GetEmployeeByCompanyId/' + companyid;
            $.get(url, function (data) {
                //console.log(data);
                $employeetable.bootstrapTable('load', data)
            })

        }

        $('#addemployeebutton').on('click', function (e) {
            if ($("form").valid()) {
                currentrowindex = -1;
                var url = "/Companies/CreateEmployee"
                $.get(url, function (data) {
                    //console.log(data);
                    var index = -1;
                    $('#employeeformModal-body').html(data);
                    $('#Id', '#employeeformModal-body' ).val(0);
					$('#CompanyId' , '#employeeformModal-body').val(companyid );
                    $('#employeeformModal').modal('toggle');
                });
            }
            e.preventDefault();
            //Return false regardless of validation to stop form submitting
            //prior to ajax doing its thing
            return false;
        })

		$('#employeeconfirmbutton').on('click', function (e) {
            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");
            if (!$('form').valid()) {
                e.preventDefault();
                return false;
            }
								var companyname = $('#CompanyId :selected' , '#employeeformModal-body').text();
							 					var id = $('#Id' , '#employeeformModal-body').val();
				 							 					var name = $('#Name' , '#employeeformModal-body').val();
				 							 					var sex = $('#Sex' , '#employeeformModal-body').val();
				 							 					var age = $('#Age' , '#employeeformModal-body').val();
				 							 					var brithday = $('#Brithday' , '#employeeformModal-body').val();
				 							 					var companyid = $('#CompanyId :selected' , '#employeeformModal-body').val();
					
				 			            
            var employee = {
               					CompanyName :companyname ,
							 					Id : id ,
				 							 					Name : name ,
				 							 					Sex : sex ,
				 							 					Age : age ,
				 							 					Brithday : brithday ,
				 							 					 CompanyId :companyid ,
					
				 								ObjectState:'Added'
            }
            if (currentrowindex == '-1') {
                $employeetable.bootstrapTable('append', employee);
            } else {
                $employeetable.bootstrapTable('updateRow', { index: currentrowindex, row: employee });
            }

            $('#employeeformModal').modal('toggle');
        });

		
	});


</script>



